Vue进阶

2024-06-10 11:55| 来源: 网络整理| 查看: 265

文章目录一、前言二、过程解析 1、Vue构造函数 2、Vue.prototype._init 3、小结三、参考资料

一、前言

使用的vue版本是2.6.12

在项目中我们引入了Vue：import Vue from 'vue'。那么问题是vue到底从哪里来的？从node_modules中来。在node_modules路径下存在vue文件夹，vue文件夹中存在一个package.json文件。在这个文件中存在两个配置字段，它们都是程序的主入口文件。

"main": "dist/vue.runtime.common.js", "module": "dist/vue.runtime.esm.js",

其中module的优先级大于main的优先级。在module不存在时，main对应的配置项就是主入口文件。可以看到 dist/vue.runtime.esm.js 才是主入口文件。

为了方便，我们还是去GitHub上下载vue的源代码到本地查看 https://github.com/vuejs/vue

下载完成后，我们在编辑器打开，它的目录结构如下：在这里插入图片描述其中Vue.js 的源码都在 src ⽬录下，源码的⽬录结构如下：

src ├── compiler # 编译相关 ├── core # 核⼼代码 ├── platforms # 不同平台的⽀持 ├── server # 服务端渲染 ├── sfc # .vue ⽂件解析 ├── shared # 共享代码二、过程解析 1、Vue构造函数

当 new Vue(options) 时调用的是 src/core/instance/index.js 文件中的Vue函数，源码如下：

function Vue (options) { if (process.env.NODE_ENV !== 'production' && !(this instanceof Vue) ) { warn('Vue is a constructor and should be called with the `new` keyword') } this._init(options) }

当我们新建一个Vue实例时候，会判断如果当前的环境不是生产环境，并且如果在调用Vue的时候，没有用new操作符，就会调用warn函数，抛出一个警告，告诉你Vue是一个构造函数，需要用new操作符去调用。这个warn函数并不是单纯的console.warn。

接下来，把 options 作为参数调用 _init 方法。options 就是调用 new Vue时候传入的参数。可以看到Vue构造函数的核心代码只有一行：this._init(options)

在Vue构造函数后边，还有几句代码：

function Vue (options) { ... } initMixin(Vue

【本文地址】

Vue进阶

Vue进阶

今日新闻

推荐新闻